<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京站智能网格化管理系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/common.css">
    <link rel="stylesheet" href="../lib/css/iconFont/iconfont.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/count.css"> -->
    <link rel="stylesheet" href="../lib/css/pagination.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/station.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/newcount.css">
</head>
<body>
<div class="station_grid wraper">
    <div class="searchwrap">
        <!-- 日期时间 -->
        <div class="searchelm searchtime1">
            <div class="select2_wrap" style="min-width:12rem;max-width:60%">
                <select name="grid" id="grid" class="grid" style="width:100%"></select>
            </div>
            <input type="text" id="datetimepicker" class="search_control" name="ptime_start">
            <input type="text" id="datetimepicker2" class="search_control" name="ptime_end">
            <select name="qstatus" id="qstatus" class="select_option qstatus">
                <option value="0">全部</option>
                <option value="2">已巡视</option>
                <option value="1">未巡视</option>
            </select>
            <select name="qtype" id="qtype" class="select_option qtype">
                <option value="2">两小时</option>
                <option value="6">六小时</option>
                <option value="8">八小时</option>
                <option value="12">十二小时</option>
            </select>
            <input type="button" value="查询" id="lookUp1" class="lookUp" />
        </div>
        <!-- 图表导出 切换 -->
        <div class="tabbar clearfix">
            <ul class="tab">
                <li class="tab_li" data-rel='2'><i class="icon iconfont icon-daochu"></i>导出</li>
            </ul>
        </div> 
    </div>
    <!-- echarts统计图表 -->
    <div class="main_content">
        <!-- 人员表格 -->
        <div class="station_shaow_detail main_table_wrap nan">
            <table class="station_shaow_detail_table main_table">
                <caption style="font-size: 2.4rem;">网格巡视情况统计</caption>
            </table>
                <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string">
            </div>
        </div>
        <!-- 下钻信息表 -->
        <div class="drilldown station_shaow_detail" style="display:none">
            <div class="div_close">
                <p class="p_close"><a href="#" class="" style="">《&nbsp;返回</a></p>
            </div>
            <div class="drilldown_info">
                <h4 class='detail-title' style="font-size: 2.4rem;">当前网格时间段情况统计详情</h4>
                <!-- 明细表 -->
                <p class="table-text">&nbsp;</p>
                <table class="station_shaow_detail_table drilldown_table">
                    <!-- <caption style="font-size: 2.4rem;">当前网格时间段情况统计详情</caption> -->
                </table>
            </div>
            <div class="interim">
                <div class="M-box1" id="page_string1"></div>
            </div>
        </div>
        <div class="lds-css block">
            <div class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- <script type="text/javascript" src="/assets/js/jquery.1.10.1.js"></script> -->
<script type="text/javascript" src="../lib/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/js/base.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/jquery.pagination.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/echarts.js"></script>
<script type="text/javascript" src="../lib/js/count.js"></script>
<script  type="text/javascript">
var page = 1 ,common=1,isDetail=false,detail=1,deatailGridId='',localDetailData={}//页数
$("#datetimepicker").datetimepicker({
    timepicker: true,
    format:'Y-m-d H:i'
});
$("#datetimepicker2").datetimepicker({
    timepicker: true,
    format:'Y-m-d H:i'
})
newTime('time2')
//查询
$("#lookUp1").click(function () {
    common_request() 
});
//表格
function deviceGridRepairTable(data){
    $('.lds-css').addClass('block')
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.countQ+'get_assign',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            // 根据数据库取到结果拼接现在结果
            var _tableData = res.data
            $('.main_table').createTable({data:_tableData,columns:[
                {name:'编号',field:'grid_uname',w:'4rem'},
                {name:'网格名',field:'grid_name',w:'4rem'},
                // {name:'负责部门',field:'department_name',w:'10rem'},
                {name:'是否被巡视',field:'is_check',w:'8rem'},
                {name:'实际巡视次数',field:'number',w:'8rem'},
                {name:'未完成次数',field:'wwc',w:'8rem'},
                {name:'操作',field:'grid_id',w:'8rem',render:function(index,elm,data){
                    // return '<a>详情</a> <a>时段</a>'
                    var _btn = '<span class="black1 detail detail1" data-detail="1" data-rel=\"'+ elm +'\">详情</span> <span class="black1 detail detail2" data-detail="2" data-rel=\"'+ elm +'\">时段</span>',$btn = $(_btn)
                    return _btn
                }}
            ]})
            //$("#page_string").html(res.resultinfo.obj);
            $('.detail').off('click.checkdetail').on('click.checkdetail',function(){
                detail = $(this).data('detail');
                deatailGridId = $(this).data('rel')
                localDetailData = _tableData.filter(function(v){
                    return v.grid_id == deatailGridId
                })[0]
                isDetail=true
                common_request(1)
            })
            
            
        }
    });
}
function deviceGridRepairTableDropDown(data){
    var _txt='<span>编号：'+localDetailData.grid_uname+'</span>'
    _txt += '<span>网格名：'+localDetailData.grid_name+'</span>'
    // _txt += '<span>负责部门：'+localDetailData.bname+'</span>'
    _txt += '<span>实际巡视次数：'+localDetailData.number + '</span>'
    $('.drilldown_info .table-text').html(_txt)
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.countQ+'get_assign',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.station_shaow_detail').hide()
            $('.ecahrts_style').hide()
            $('.drilldown').show()
            // 根据数据库取到结果拼接现在结果
            var _tableData = res.resultinfo.list
            $('.drilldown_table thead').remove()
            if(_data.detail == '1'){
                $('.drilldown_table').createTable({data:_tableData,columns:[
                    {name:'工号',field:'user_account',w:'4rem'},
                    {name:'巡视人',field:'user_name',w:'10rem'},
                    {name:'所属部门',field:'bname',w:'10rem'},
                    {name:'岗位',field:'gname',w:'10rem'},
                    {name:'巡视时间',field:'time',w:'10rem'},
                    {name:'开始时间',field:'start_time',w:'8rem'},
                    {name:'结束时间',field:'end_time',w:'8rem'},
                    {name:'是否巡视',field:'is_check',w:'8rem'}
                ]})
            }else{
                $('.drilldown_table').createTable({data:_tableData,columns:[
                    {name:'序号',ids:1,field:'',w:'4rem'},
                    {name:'网格名称',field:'grid_name',w:'10rem'},
                    {name:'开始时间',field:'start_time',w:'10rem'},
                    {name:'结束时间',field:'end_time',w:'10rem'},
                    {name:'是否巡视',field:'status',w:'10rem'}
                ]})
            }
            $("#page_string1").html(res.resultinfo.obj);
            
        }
    });
}


$('.div_close').on('click',function(){
    isDetail=false
    $('.drilldown').hide()
    $('.searchtime2').show()
    page = 1
    if(common == 1){
        $('.main_table_wrap').show()       
    }else{
        $('.mcharts').show()
    }
})
function common_request(elm){
    
    if(arguments[0]){
        page = arguments[0]
    }else{
        page = 1
    }
    var _data = {
        'page':page,
        'start_time':$('#datetimepicker').val(),
        'end_time':$('#datetimepicker2').val(),
        'status':$('.qstatus').val(),
        'hours':$('.qtype').val(),
        'map_id':$('.grid').val() == 'none'?null:$('.grid').val()
    };
    if(isDetail){
        _data.map_id = deatailGridId
        _data.detail = detail
        deviceGridRepairTableDropDown(_data)
    }else{
        deviceGridRepairTable(_data)
    }  
}
//查询
function search_(){
    page = 1 ;
    common_request(1);  
}
$('.grid').rpSelect({url:serverUrl.base+serverUrl.grid+'grid_choice_list',multiple:false,hasAll:true,calfn:function(){
    common_request()
}})
//图表切换后的操作
$('.tab_li').on('click',function(elm){
    var $this = $(this)
    var _ids = $this.data('rel')?$this.data('rel'):$this.index()
    $('.searchtime2').show()
    if(_ids== '0'){
        $('.status').hide()
        $('.drilldown').hide()
        common = 2;
        isDtail = false
        $("#lookUp2").trigger('click')
    }else if(_ids== '1'){
        $('.status').show();
        $('.drilldown').hide();
        isDtail = false
        common = 1
        $("#lookUp2").trigger('click')
    }else if(_ids== '2'){
        //导出按钮
        var _data = {
            'page':page,
            'start_time':$('#datetimepicker').val(),
            'end_time':$('#datetimepicker2').val(),
            'status':$('.qstatus').val(),
            'hours':$('.qtype').val(),
            'map_id':$('.grid').val() == 'none'?'':$('.grid').val()
        };
        var _url=serverUrl.base + serverUrl.countQ + 'export_assign?start_time='+encodeURIComponent(_data.start_time)+'&end_time='+encodeURIComponent(_data.end_time)+'&status='+encodeURIComponent(_data.status)+'&map_id='+encodeURIComponent(_data.map_id)+'&hours='+encodeURIComponent(_data.hours);
        window.location.href = _url;return;
    }
})

</script>
</html>

